<template>
  <div class="header">
    <nav class="nav">
      <ul>
        <li class="on">
          <router-link to="/">
            首页
          </router-link>
        </li>
        <li
          v-for="(item,index) in categoryList.slice(0, 6)"
          :key="index"
          @click="jumpCategory(item)"
        >
          {{ item.classifyName }}
        </li>
      </ul>
    </nav>
    <div class="search">
      <div class="searchSelect">
        <Search
          :value="searchVal"
          @command="searchCommand"
        />
      </div>
      <div class="searchRight">
        <!-- <el-input -->
        <input
          type="text"
          v-model="keyword"
          maxlength="20"
          @keyup.enter="searchPro"
          placeholder="请输入搜索商品"
        />
      </div>
      <svg-icon class="searchIcon" name="search" @click="searchPro" />
      <!-- <span @click="searchPro">
        <svg-icon class="searchIcon" name="search" @click="searchPro" />
      </span> -->
    </div>
  </div>
</template>

<script setup>
import { defineComponent, ref, shallowRef, onMounted } from 'vue'
import { useShop } from '@/store/shop'
import { useRouter } from 'vue-router'
import SvgIcon from '@/components/svgIcon/index.vue';
import Search from './search.vue'
import {
  getCategory
} from '@/api/nav.js'



defineComponent({
  name: "HomHeader",
})
const shopStore = useShop()
const router = useRouter();
const searchVal = shallowRef("宝贝");
const keyword = shallowRef("");
function searchCommand (command) {
  searchVal.value = command;
}
function searchPro () {
  shopStore.setSearchObj({
    keyword: keyword.value,
    searchVal: searchVal.value
  })
  if (router.currentRoute.value.name !== "search") {
    router.push({
      path: "/activity/search"
    });
  }
}
/**
 * 分类数据
 */
let categoryList = ref([]);
function getCategoryData () {
  getCategory().then(response => {
    const res = response.data;
    if (res.code === "200") {
      categoryList.value = res.data;
    }
  }).catch(err => {
    console.log(err);
  });
}
// 跳转到类别主页
function jumpCategory (item) {
  router.push({
    name: "category",
    query: {
      classifyData: JSON.stringify(item)
    }
  });
}
onMounted(() => {
  getCategoryData();
});
</script>

<style scoped lang="scss">
$lightBlack: #666666;
$navSearchHeight: 39px;
.header{
  height: 80px;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  .nav{
    float: left;
    padding-top: 30px;
    ul{
      width: 760px;
      display: flex;
      justify-content: space-between;
    }
    li{
      font-size: 16px;
      line-height: 21px;
      padding-bottom: 24px;
      color: #333;
      cursor: pointer;
      border-bottom: 3px solid #fff;
      &.on,&:hover{
        color: #C5AA7B;
        border-color: #C5AA7B;
      }
    }
  }
  .search{
    width: 394px;
    height: 39px;
    border: 2px solid #F3F4F5;
    float: right;
    // margin-top: 21px;
    display: flex;
    .searchSelect{
      $height: 30px;
      width: 82px;
      height: $height;
      line-height: $height;
      margin-top: 2px;
      border-right: 1px solid #CCCCCC;
      text-align: center;
      .el-dropdown{
        line-height: $height;
        color: #C5AA7B;
      }
    }
    .searchRight{
      flex: 1;
      input{
        padding-left: 15px;
        font-size: 14px;
        color: #333;
        line-height: 35px;
      }
    }
    .searchIcon{
      cursor: pointer;
      width: 30px;
      height: 30px;
      margin: 2px 5px;
    }
  }
}
</style>
